<script setup>
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { geShowoneAPi } from "../../http/http";
const { push } = useRouter();
const data = reactive({
  userImg: "",
  username: "",
  token: localStorage.getItem("token"),
});
// 请求用户数据
const FngeShowoneAPi = async (id) => {
  let res = await geShowoneAPi(id);
  data.userImg = res.data.avatar;
};
// 用户数据
const userinfo = () => {
  let res = JSON.parse(localStorage.getItem("token")) || [];
  const { avatar, user_nickname, id } = res;
  FngeShowoneAPi(id);
  // data.userImg = avatar;
  data.username = user_nickname;
};
userinfo();

// 点击设置按钮
const setUpBut = () => {
  let token = JSON.parse(localStorage.getItem("token"));
  push("/setUpInfo");
  if (token) {
  } else if (!token) {
    push("/login");
  }
};

const { username, userImg, token } = toRefs(data);
</script>
<template>
  <div class="info">
    <div class="info_header">
      <div class="headPortrait">
        <!-- 头像 -->
        <div class="info_img" @click="$router.push('/Personalnfo')">
          <img :src="userImg" alt="" />
        </div>
        <!-- 注册登录 -->
        <p v-if="username">{{ username }}</p>
        <p v-else @click="$router.push('/login')">登录/注册</p>
      </div>
      <!-- 设置按钮 -->
      <div class="setUp" @click="setUpBut"></div>
    </div>
    <!-- 我的订单信息 -->
    <van-grid :column-num="3" @click="$router.push('/myOrder')">
      <van-grid-item icon="photo-o" text="12132">
        <van-icon name="logistics" size="23" />
        <p>我的订单</p>
        <span>买课发快递</span>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="文字">
        <van-icon name="coupon-o" size="23" />
        <p>兑换课程</p>
        <span>兑换码兑换课程</span>
      </van-grid-item>
      <van-grid-item icon="photo-o" text="文字">
        <van-icon name="location-o" size="23" />
        <p>地址管理</p>
        <span>收货地址</span>
      </van-grid-item>
    </van-grid>
    <!-- 我的 -->

    <div class="my_collect">
      <ul class="ul_one">
        <li @click="$router.push('/MyCollection')">
          <span class="iconfont icon-wodeshoucang"></span>
          <div class="my_title">我的收藏</div>
          <van-icon name="arrow" color="#ccc" />
        </li>
      </ul>
      <li class="coupon">
        <span class="iconfont icon-huiyuan"></span>
        <div class="my_title">我的会员</div>
        <van-icon name="arrow" color="#ccc" />
      </li>
      <li class="coupon">
        <span class="iconfont icon-9"></span>
        <div class="my_title">我的优惠券</div>
        <van-icon name="arrow" color="#ccc" />
      </li>
      <ul class="ul_two">
        <li>
          <span class="iconfont icon-xiaoxi"></span>
          <div class="my_title">我的信息</div>
          <van-icon name="arrow" color="#ccc" />
        </li>
        <li>
          <span class="iconfont icon-yijianfankui"></span>
          <div class="my_title">问题反馈</div>
          <van-icon name="arrow" color="#ccc" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.info {
  width: 750px;
  background: #f7f7f7;

  .info_header {
    position: relative;
    width: 100%;
    height: 400px;
    background-image: url(https://wap.lexuemiao.com/img/user_bg.dd455109.png);
    background-size: 100% 100%;

    .headPortrait {
      width: 200px;
      height: 180px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      font-size: 30px;

      .info_img {
        width: 140px;
        height: 140px;
        background-image: url();
        background-size: 100% 100%;
        margin: auto;

        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      p {
        width: 200px;
        color: white;
        font-size: 35px;
        margin-top: 20px;
        font-weight: 700;
        margin: auto;
        display: inline-block;
        text-align: center;
      }
    }

    .setUp {
      position: absolute;
      width: 50px;
      height: 50px;
      background-image: url();
      background-size: 100% 100%;
      top: 50px;
      right: 50px;
    }
  }

  .van-grid {
    p {
      font-size: 25px;
    }

    span {
      font-size: 26px;
      color: #bebebe;
    }
  }

  .my_collect {
    width: 750px;

    .ul_one {
      margin-top: 25px;
    }

    ul {
      width: 750px;
      background: white;
      padding: 0 20px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 108px;

        span {
          font-size: 40px;
        }

        .my_title {
          flex: 1;
          margin-left: 20px;
          font-size: 29px;
          margin-top: 7px;
        }
      }
    }

    .coupon {
      padding: 0 20px;
      margin-top: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 108px;
      background: white;

      span {
        font-size: 40px;
      }

      .my_title {
        flex: 1;
        margin-left: 20px;
        font-size: 29px;
        margin-top: 7px;
      }
    }

    .ul_two {
      width: 750px;
      background: white;
      padding: 0 20px;
      margin-top: 25px;
      height: 200px;

      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 100px;

        span {
          font-size: 40px;
        }

        .my_title {
          flex: 1;
          margin-left: 20px;
          font-size: 29px;
          margin-top: 7px;
        }
      }
    }
  }
}

::v-deep .van-grid-item__content {
  padding: 10px 0;
}
</style>
